<html xmlns:chiron="http://cixar.com/javascript">
    <head>
        <script src="../modules.js?chironscript.js"></script>
    </head>
    <body style="background-color: #46b3d4">
        <div id="loading" chiron:type="chironscript.js#Loading">Loading...</div>
        <a href="#" id="toWhite">Fade to White</a>
        <a href="#" id="toBase">Fade back</a>
        <script language="chironscript">
            with (require('browser.js')) {
            with (require('animate.js')) {
            with (require('transitions.js')) {
            with (require('color.js')) {
            (function () {

            var getBackgroundColor = function () {
                return getStyle(document.body, 'backgroundColor');
            };

            var baseColor = getBackgroundColor();

            var fade = function (toColor) {
                animate(
                    1000,
                    compose(transition(getBackgroundColor(), toColor), reversed(cubic)), 
                    function (color) {
                        document.body.style.backgroundColor = color.string();
                    }
                );
            };
                
            toWhite.getElement().onclick = function () {
                fade(white);
                return false;
            };
            toBase.getElement().onclick = function () {
                fade(baseColor);
                return false;
            };

            }).call(this);
            }}}}
        </script>
    </body>
</html>
